<template>
  <div id="home">
    <!-- 导航栏搜索框--全显示 -->
    <Search></Search>
    <!-- 工具箱--全显示  -->
    <Toolbox class="toolbox"></Toolbox>
    <!-- 地图控件--全显示 -->
    <Map></Map>
    <!-- 登录、退出--全显示 -->
    <Avatar class="avatar"></Avatar>
    <!-- 左侧目录树--仅traffic显示 -->
    <CatalogTree
      v-show="usertype == 'admin' || usertype == 'traffic'"
    ></CatalogTree>
    <!-- 查看公告 -->
    <Announcement></Announcement>
    <!-- 实时路况仅--traffic显示-->
    <Road></Road>
    <!-- 报告路况--仅user显示 -->
    <Report class="reportbox" v-show="usertype == 'user'"></Report>
    <!-- 用户管理--仅admin显示 -->
    <Administration class="admin" v-show="usertype == 'admin'"></Administration>
    <Audievent
      v-show="usertype == 'admin' || usertype == 'traffic'"
    ></Audievent>
    <!-- 事件管理--仅traffic显示 -->

    <Event v-show="usertype == 'admin' || usertype == 'traffic'"></Event>

    <!-- 查看监控--仅traffic显示 -->
    <Camera v-show="usertype == 'admin' || usertype == 'traffic'"></Camera>
    <Fabu v-show="usertype == 'admin' || usertype == 'traffic'"></Fabu>
    <!-- 事件添加 -->
    <addEvent></addEvent>
    <!-- 事件更新 -->
    <updateevent></updateevent>
  </div>
</template>

<script>
import Map from "../../components/map.vue"; //地图组件（各类控件都在这里）
import CatalogTree from "../../components/catalogTree.vue"; //左侧目录树
import Search from "../../components/search.vue"; //搜索框组件
import Avatar from "../../components/Avatar.vue"; //头像与用户id，切换用户，退出登录组件
import Toolbox from "../../components/Toolbox1.vue"; //工具箱组件（测量距离与面积、下载与关闭）
import Administration from "../../components/Administration.vue"; //用户管理组件
import Road from "../../components/Road.vue"; //查看路况组件
import Announcement from "../../components/announcement.vue"; //查看施工公告组件
import Report from "../../components/report.vue"; //报告报告路况组件
import Event from "../../components/event.vue"; //事件管理组件
import Camera from "../../components/camera.vue";
import Audievent from "../../components/auditevent.vue";
import Fabu from "../../components/fabu.vue";
// 事件添加
import addEvent from "../../components/addEvent.vue";
// 事件更新
import updateevent from "../../components/updateevent.vue";
export default {
  data() {
    return {
      username: "",
      usertype: "",
    };
  },
  components: {
    Map,
    CatalogTree,
    Search,
    Avatar,
    Toolbox,
    Administration,
    Road,
    Announcement,
    Report,
    Event,
    Camera,
    Audievent,
    Fabu,
    addEvent,
    updateevent,
  },
  created() {
    this.username = this.$cookies.get("username");
    this.usertype = this.$cookies.get("usertype");
  },
  methods: {},
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#home {
  width: 100vw;
  height: 100vh;
}
.audievevt,
.el-menu.el-menu--horizontal {
  cursor: pointer;
}
.avatar {
  z-index: 2;
}
.toolbox {
  z-index: 2;
  margin-top: 10px;
}
.v-modal {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: rgba(255, 255, 255, 1);
  z-index: 1;
}
.reportbox {
  margin-left: 1036px;
  margin-top: 13px;
}
.admin {
  margin-left: 1040px;
  margin-top: 13px;
}
.event-maneger {
  margin-left: 1038px;
  margin-top: 13px;
  cursor: pointer;
}
</style>
